<template>
  <details-layout
    :data="data"
    :related="related"
    titleField="名称"
    moreUrl="/cases"
    channel="cases">
    <div class="title text-center q-px-lg">{{data.名称}}</div>
    <div class="info row no-wrap relative-position justify-end">
      <div class="type absolute-center row no-wrap">
        <div class="q-ml-md">{{$t('类型')}}: {{data.类型}}</div>
        <div class="q-ml-md">{{$t('领域')}}: {{data.领域.join('、')}}</div>
      </div>
      <div class="date">{{data.日期 | normalDate}}</div>
    </div>

    <div class="details">
      <!-- <div class="column no-wrap q-pb-xl">
        <div class="row properties-list"
          v-for="(prop, idx) in properties|| []"
          :key="idx">
          <div class="col row no-wrap items-center property-entry" v-if="(idx % 2) === 0 && prop">
            <div class="property-label">{{$t(prop.label)}}</div>
            <div class="property-value q-ml-md" v-if="!prop.d">
              {{propertyValue(prop.value)}}</div>
            <div class="property-value q-ml-md" v-else>
            {{propertyValue(prop.value) | normalDate}}</div>
          </div>
          <div class="col row no-wrap items-center property-entry"
            v-if="(idx % 2) === 0 && properties[idx + 1]">
            <div class="property-label">{{$t(properties[idx + 1].label)}}</div>
            <div class="property-value q-ml-md" v-if="!properties[idx + 1].d">
              {{propertyValue(properties[idx + 1].value)}}</div>
            <div class="property-value q-ml-md" v-else>
            {{propertyValue(properties[idx + 1].value) | normalDate}}</div>
          </div>
        </div>
      </div> -->


      <div class="content" v-html="data.详情" v-if="data.详情"></div>

      <div v-else-if="data && data.附件 && data.附件.length > 0">
        <pdfviewer
          version="clear"
          v-for="(att, idx) in [data.附件[0]]" :key="idx"
          :src="att.id | serverDocument"
          v-model="showPreview"
          type="pdfjs"
          style="height: 1200px; max-width: 100%;"></pdfviewer>
      </div>

      <!-- <div class="link q-my-lg full-width text-right">
        <a :href="data.链接" target="_blank">{{$t('查看原文')}}</a>
      </div> -->

      <!-- <div class="attachment row" v-if="data.附件 && data.附件.length > 0">
        <q-card
          class="attachment-card"
          v-for="(att, idx) in data.附件" :key="idx">
          <q-card-section>
            {{att.name}}
          </q-card-section>
          <q-separator></q-separator>
          <q-card-actions>
            <a
               class="full-width text-center"
              :href="att.id | serverDocument" target="_blank">{{$t('查看附件')}}</a>
          </q-card-actions>
        </q-card>
      </div> -->
    </div>
  </details-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnIDChange, RefreshRelatedOnIDChange } from '../../components/mixins/data';
import DetailsLayout from '../../components/detailsLayout.vue';
import pdfviewer from '../../components/pdfviewer';

export default {
  name: 'CaseDetails',
  mixins: [mixins.ObjectDataMixin, RefreshOnIDChange, RefreshRelatedOnIDChange],
  components: {
    DetailsLayout,
    pdfviewer,
  },
  data() {
    return {
      related: [],
      showPreview: true,
      properties: [
        {
          label: '索引号',
          value: '索引',
        },
        {
          label: '成文日期',
          value: '成文日期',
          d: true,
        },
        {
          label: '发文字号',
          value: '文号',
        },
        {
          label: '发布日期',
          value: '日期',
          d: true,
        },
        {
          label: '适用领域',
          value: '领域',
        },
      ],
    };
  },
  computed: {
    propertyValue() {
      return (vn) => {
        let v;
        if (typeof vn === 'function') {
          v = vn(this.data);
        } else {
          v = this.data && this.data[vn];
        }

        if (Array.isArray(v)) return v.join('、');

        return v || '';
      };
    },
  },
  created() {
    this.getRelated();
  },
  methods: {
    getRelated() {
      this.getRequest(`/portal/cases/related/${this.$route.params.id}`, { limit: 5 }).then((d) => {
        if (d && d.msg === 'OK') {
          this.related = d.data.docs;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.property-entry {
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed $grey-4;
}
.property-label {
  width: 120px;
  max-width: 120px;
  min-width: 120px;
  text-align: right;

  color: $primary;
  padding: 2px;
  font-size: 14px;
}
.property-value {
  font-size: 14px;
  line-height: 18px;
}
</style>
